<template>
  <el-tag :type="type.type" size="small" :color="type.color" :style="tagStyle">{{type.name}}</el-tag>
</template>

<script>
export default {
  name: 'orderTags',
  props: ['typeValue', 'typeName', 'tagStyle'],
  data: function () {
    return {
      type: {},
      typeData: {
        orderType: [
          { name: '流水单', tags: 'LSD', value: 2, type: 'success' },
          { name: '开卡单', tags: 'KKD', value: 1, type: 'warning' },
          { name: '充值单', tags: 'CZD', value: 3, type: 'primary' },
          { name: '退款单', tags: 'TQD', value: 11, type: 'danger' },
          { name: '退卡单', tags: 'TKD', value: 10, type: 'info' }
        ],
        inOutType: [
          { name: '充值', tags: '', value: 1, type: 'success', color: '#b975ad' },
          { name: '欠款', tags: '', value: 2, type: 'warning', color: '#75b97a' },
          { name: '消费', tags: '', value: 3, type: 'primary', color: '#758fb9' },
          { name: '退款', tags: '', value: 4, type: 'danger', color: '#b9b475' },
          { name: '转卡', tags: '', value: 5, type: 'info', color: '#6ab475' }
        ],
        orderStatus: [
          { name: '未结账', tags: '', value: 0, type: '', color: '#dea155' },
          { name: '已结账', tags: '', value: 1, type: '', color: '#56bf49' },
          { name: '已分配', tags: '', value: 2, type: '', color: '#497ebf' }
        ],
        normalStatus: [
          { name: '停用', tags: '', value: 1, type: 'danger' },
          { name: '正常', tags: '', value: 0, type: 'success' }
        ],
        cardType: [
          { name: '期卡', tags: '', value: 1, type: 'primary' },
          { name: '疗程卡', tags: '', value: 2, type: 'success' }
        ],
        accountType: [
          { name: '现金', tags: '', value: 1, type: 'success' },
          { name: '银行卡', tags: '', value: 2, type: 'warning' },
          { name: '网银', tags: '', value: 3, type: 'primary' }
        ],
        isDisable: [
          { name: '正常', tags: '', value: 0, type: 'success' },
          { name: '停用', tags: '', value: 1, type: 'warning' }
        ],
        yuyueType: [
          { name: '类型一', value: 1, type: 'success' },
          { name: '类型二', value: 2, type: 'warning' },
          { name: '类型三', value: 3, type: 'danger' }
        ],
        yuyueStatus: [
          { name: '已预约', value: 1, type: 'primary' },
          { name: '已完成', value: 2, type: 'success' },
          { name: '已取消', value: 3, type: 'info' }
        ]
      }
    }
  },
  methods: {
    checked () {
      this.typeData[this.typeName].forEach((row) => {
        if (row.value === this.typeValue || row.tags === this.typeValue) {
          this.type = row
        }
      })
    }
  },
  watch: {
    typeValue: 'checked',
    typeName: 'checked',
    tagStyle: 'checked'
  },
  mounted: function () {
    this.checked()
  }
}
</script>

<style scoped>
</style>
